<template>
  <div class="dataTable">
    <div class="header">
      <div class="flex">
        <div class="key_icon" />
        <div>私钥管理</div>
      </div>
      <div class="flex">
        <el-input v-model="keyword" class="search_input" prefix-icon="el-icon-search" placeholder="请输入用户名或公钥地址进行搜索" @input="keywordChange" @keyup.enter.native="onSearch" />
        <el-button class="search_btn" type="primary" icon="el-icon-plus" @click="add_visible = true">新增用户</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :data="dataList"
    >
      <el-table-column
        prop="user_name"
        label="用户名称"
        show-overflow-tooltip
        width="170"
      >
        <!-- <div slot-scope="{row}" class="textOverflow">{{ `${myInfo.account}_${row.user_name}` }}</div> -->
      </el-table-column>
      <el-table-column
        prop="user_id"
        label="用户ID"
        width="120"
      />
      <el-table-column
        prop="description"
        label="用户描述"
        width="200"
      />
      <el-table-column
        prop="public_key"
        label="用户公钥地址信息"
        show-overflow-tooltip
        width="280"
      >
        <div
          slot-scope="{row}"
          v-clipboard:copy="row.public_key ? row.public_key : ''"
          v-clipboard:error="onError"
          v-clipboard:success="onCopy"
          class="textOverflow"
        >
          {{ row.public_key }}
        </div>
      </el-table-column>
      <el-table-column
        prop="sign_user_id"
        label="Sign User Id"
        width="280"
      />
      <el-table-column
        prop="user_status"
        label="用户状态"
        width="120"
      >
        <div slot-scope="{row}">
          <div :class="row.user_status === 1 ? 'sucess_point' : 'fail_point'" />{{ row.user_status === 1 ? '正常' : '停用' }}
        </div>
      </el-table-column>
      <el-table-column
        prop="operate"
        label="操作"
        width="100"
      >
        <div slot-scope="{row}" style="display: flex;">
          <el-tooltip effect="dark" content="编辑" placement="top">
            <div class="edit_icon" @click="editUser(row)" />
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>
    <el-pagination
      style="text-align: center; margin-top: 20px;"
      :current-page="pager.page"
      :page-sizes="pager.pageSizes"
      :page-size="pager.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
    <add :visible="add_visible" @close="closeAdd" />
    <edit :visible="edit_visible" :check-data="checkData" @close="closeEdit" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { key_user_list } from '@/api/privateKey'
import edit from './edit-dialog.vue'
import add from './add-dialog.vue'

export default {
  name: 'DataTable',
  components: { edit, add },
  data() {
    return {
      keyword: '',
      loading: false,
      pager: {
        page: 1,
        pageSizes: [5, 10, 20],
        pageSize: 10,
        total: 0
      },
      dataList: [{
        id: 1,
        file: '区块链金融反诈班.pdf',
        size: '1000',
        group: '区块链金融反诈班',
        created_at: '2020-01-03  09:41:00'
      }],
      checkData: {},
      add_visible: false,
      edit_visible: false
    }
  },
  computed: {
    ...mapState({
      myInfo: (state) => state.basicSettings.myInfo
    })
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const param = {
          page: this.pager.page,
          per_page: this.pager.pageSize,
          keyword: this.keyword
        }
        const { code, data } = await key_user_list(param)
        if (!code) {
          this.dataList = data.data
          const { pager } = this
          pager.page = data.current_page
          pager.total = data.total
          pager.pageSize = Number(data.per_page)
        }
        this.loading = false
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    keywordChange(keyword) {
      if (!keyword) {
        this.onSearch()
      }
    },
    onSearch() {
      const { pager } = this
      pager.page = 1
      this.loadData()
    },
    pageSizeChange(val) {
      const { pager } = this
      pager.pageSize = val
      this.loadData()
    },
    pageChange(val) {
      const { pager } = this
      pager.page = val
      this.loadData()
    },
    closeAdd() {
      this.add_visible = false
    },
    editUser(row) {
      this.checkData = row
      this.edit_visible = true
    },
    closeEdit() {
      this.edit_visible = false
    },
    onCopy() {
      this.$messageOnce.success('复制成功')
    },
    onError() {
      this.$messageOnce.error('复制失败')
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.dataTable {
	width: 1320px;
	min-height: 500px;
	background: #FFFFFF;
	box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.04);
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 30px;
	padding: 20px;
	.header {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2C2C2C;
		margin-bottom: 25px;
		.key_icon {
			width: 24px;
			height: 24px;
			background: url('../../assets/privateKey/key_icon.png');
			background-size: 100%;
			margin-right: 20px;
		}
		.search_input {
			width: 300px;
		}
		.search_btn {
			margin-left: 80px;
		}
	}
}

.textOverflow {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.flex {
	display: flex;
	align-items: center;
}

.sucess_point{
  @include points;
  display: inline-block;
  background: #52C41A;
}

.fail_point{
  @include points;
	display: inline-block;
  background: #999999;
}

.edit_icon {
	background: url('../../assets/edit@list.png');
  @include list_icons;
  width: 31px;
  height: 30px;
}

.search_input ::v-deep .el-input__inner{
  border-radius: 30px;
	border: 1px solid #E4E4E4;
}
</style>
